<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>XXX公司sss系列产品目录</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="book.css">
    <link rel="stylesheet" href="circle.css">
  </head>
  <body>
    <div class="container">
      <header>
         <hgroup>
           <h1>XXX公司</h1>
           <h2>sss系列产品目录</h2>
         </hgroup>
         <p>
           sss系列产品描述sss系列产品描述sss系列产品描述sss系列产品描述
           sss系列产品描述sss系列产品描述sss系列产品描述sss系列产品描述
           sss系列产品描述sss系列产品描述sss系列产品描述sss系列产品描述
           sss系列产品描述sss系列产品描述sss系列产品描述sss系列产品描述
           sss系列产品描述sss系列产品描述sss系列产品描述sss系列产品描述
         </p>

      </header>
      <nav>
        <a href="#"> 菜单 >> </a>
        <ul>
          <li class="li-1"><a href="#"> 主页 </a></li>
          <li class="li-1"><a href="#"> 产品 </a></li>
          <li class="li-1"><a href="#"> 项目 </a>
            <ul>
              <li class="li-2"><a href="#">XXXX</a>
                <ul>
                  <li class="li-3"><a href="#">1111</a></li>
                  <li class="li-3"><a href="#">2222</a></li>
                  <li class="li-3"><a href="#">3333</a></li>
                </ul>
              </li>
              <li class="li-2"><a href="#">YYYY</a></li>
              <li class="li-2"><a href="#">ZZZZ</a>
                <ul>
                  <li class="li-3"><a href="#">1111</a></li>
                  <li class="li-3"><a href="#">2222</a></li>
                  <li class="li-3"><a href="#">3333</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="li-1"><a href="#"> 关于我们 </a></li>
        </ul>
      </nav>

      <div class="main box">
         <section class="product-list">
            <h1 class="h1"> 产品展示 </h1>
            <div class="product">
               <h4> 产品名称 </h4>
               <img src="p.jpg" alt="">
               <p> 产品描述 </p>
            </div>
          </section>
      </div>

      <div class="sideline box">
         <section class="links">
           <div class="openbutton">
             <<
           </div>
            <h1 class="h1"> 联系我们 </h1>
            <p> Telephone：xxxxxxxx </p>
            <p> Email：xxx@xxxxx </p>
            <p> 微信扫码： </p>
            <img src="weixinma.jpg" class="image">
          </section>

          <section class="book">
         		<ul class="hardcover_front">
         			<li></li>
          	</ul>
          	<ul class="page">
          		<li></li>
          		<li><a class="btn" href="#">3D模型</a></li>
        			<li></li>
          		<li></li>
        			<li></li>
        		</ul>
            <ul class="hardcover_back">
        			<li></li>
        		</ul>
        		<ul class="book_spine">
        			<li></li>
        		</ul>
        	</section>
          <span> 3D动画玩练 </span>
          <div class="circle"> </div>
          <span> CSS3动画玩练 </span>
      </div>

      <footer>
        <p>使用条款和隐私条款。版权所有，保留一切权利。</p>
      </footer>

      <script type="text/javascript" src="index.js">
      </script>
      <script type="text/javascript">
        const pdom = document.querySelector(".product");
        const productListDom = document.querySelector(".product-list");

        for(let i=0;i<20;i++){
           productListDom.insertAdjacentHTML("beforeEnd", pdom.outerHTML);
        }
      </script>
    </div>
  </body>
</html>
